<!-- 搜索页面 -->
<template>
  <div class="seach">
    <!-- 搜索框 -->
    <div class="seachInput">
      <div class="innerBox">
        <input
          type="seacher"
          class="seachInner"
          @keydown.enter="seachResult"
          v-model="keywords"
          placeholder="        请输入歌名搜索"
        />
      </div>
      <div class="del" @click="delKeywords">x</div>
    </div>

    <div class="title">热门搜索</div>

    <!-- 动态组件 -->
    <component
      :is="isHotSearch"
      v-if="keywords.length == 0"
      :hotSearchList="hotSearchList"
      @searchThis="searchThis"
      :history="history"
    ></component>

    <component
      :is="isMusicList"
      v-if="keywords != 0"
      :musicList="searchSong"
      @play="$emit('play1', $event)"
    ></component>
  </div>
</template>

<script>
import musicList from "@/components/musicList.vue";
import hotSearch from "@/components/hotSearch.vue";
export default {
  name: "search",
  data() {
    return {
      // 搜索字符串
      keywords: "",
      // 搜索结果
      searchSong: [],
      //   热搜榜
      hotSearchList: [],
      isMusicList: "musicList",
      isHotSearch: "hotSearch",
      //   历史记录
      history: [],
    };
  },
  methods: {
    seachResult() {
      this.ajaxRes();
      this.addLocalStorageItem();
    },
    ajaxRes() {
      if (this.keywords) {
        this.$axios
          .get("/cloudsearch?keywords=" + this.keywords)
          .then((res) => {
            // console.log(res.data);
            this.searchSong = res.data.result.songs.map((item) => {
              item.song = {
                //歌曲别名
                alia: item.alia,
                //歌曲码率
                privilege: item.privilege,
                //歌手
                artists: item.ar,
                //专辑
                album: item.al,
              };
              return item;
            });
            // console.log(this.searchSong[0]);
          })
          .catch((error) => {
            if (error.response) {
              // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
              console.log(
                "搜索页面 search 搜索框搜索音乐错误，请求发送成功，但返回状态码异常"
              );
              console.log("返回体数据==>", error.response.data);
              console.log("返回状态代码==>", error.response.status);
              console.log("返回头==>", error.response.headers);
            } else if (error.request) {
              // 请求已经成功发起，但没有收到响应
              // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
              // 而在node.js中是 http.ClientRequest 的实例
              console.log("搜索页面 search 搜索框搜索音乐错误，请求发送失败");
              console.log("此次发送的请求==>", error.request);
            } else {
              // 发送请求时出了点问题
              console.log("搜索页面 search 搜索框搜索音乐错误");
              console.log("问题错误==>", error.message);
            }
            console.log("error.config==>", error.config);
          });
      }
    },

    hotSearch() {
      this.$axios
        .get("/search/hot")
        .then((res) => {
          this.hotSearchList = res.data.result.hots;
          // console.log(this.hotSearchList);
        })
        .catch((error) => {
          if (error.response) {
            // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
            console.log(
              "搜索页面 search 热门搜索错误，请求发送成功，但返回状态码异常"
            );
            console.log("返回体数据==>", error.response.data);
            console.log("返回状态代码==>", error.response.status);
            console.log("返回头==>", error.response.headers);
          } else if (error.request) {
            // 请求已经成功发起，但没有收到响应
            // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
            // 而在node.js中是 http.ClientRequest 的实例
            console.log("搜索页面 search 热门搜索错误，请求发送失败");
            console.log("此次发送的请求==>", error.request);
          } else {
            // 发送请求时出了点问题
            console.log("搜索页面 search 热门搜索音乐错误");
            console.log("问题错误==>", error.message);
          }
          console.log("error.config==>", error.config);
        });
    },
    searchThis(searchWord) {
      this.keywords = searchWord;
      this.seachResult();
    },
    // addlocalStorage() {
    //   localStorage.setItem("history", "");
    // },
    addLocalStorageItem() {
      this.history.unshift(this.keywords);
      this.history = this.uniqueArr(this.history);
      localStorage.setItem("history", JSON.stringify(this.history));
    },
    uniqueArr(arr) {
      for (let i = 0; i < arr.length; i++) {
        for (let j = i + 1; j < arr.length; j++) {
          if (arr[i] === arr[j]) {
            arr.splice(j, 1);
            j--;
          }
        }
      }
      return arr;
    },
    delKeywords() {
      this.keywords = "";
    },
  },
  components: {
    musicList,
    hotSearch,
  },
  watch: {
    keywords: {
      handler() {
        this.ajaxRes();
      },
    },
  },
  created() {
    this.hotSearch();
    // this.addlocalStorage();
  },
};
</script>

<style lang="scss" scoped>
.seach {
  .seachInput {
    position: relative;
    margin: 57px 0 15px;
    height: 40px;
    display: flex;
    justify-content: space-around;
    .innerBox {
      border: 1px solid #ebecec;
      background: #ebecec;
      border-radius: 20px;
      line-height: 40px;
      width: 90vw;
      text-align: center;
      // display: block;
      .seachInner {
        // line-height: 40px;
        width: 80vw;
        height: 30px;
        border: none;
        background: #ebecec;
      }
    }
    .del {
      position: absolute;
      top: 32%;
      right: 10%;
      background: #f1f3f4;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      display: flex;
      justify-content: space-around;
      line-height: 14px;
    }
  }
  .title {
    font-size: 14px;
    margin-left: 2vw;
    color: #9e9e9e;
  }
}
</style>

